<template>
  <li class="pt30 pb30 bb90 clearfix" @click="gotoDetail(myPlace['id'])">
    <img class="fl br2 w310 h200 mr20" :src="(myPlace['imgUrl'])?myPlace['imgUrl'].split(',')[0]+'?x-oss-process=image/resize,m_fill,h_200,w_310':'static/images/preload.png'" width="310" height="200" alt=""/>
    <dl class="fl w550 h200">
      <dt class="c0 lh30 f20 clearfix">{{myPlace['placeName']}} </dt>
      <dd class="mt10">
        <table class="w550 f12 c40 fm-songti lh20 tl vt" border="0" cellspacing="" cellpadding="">
          <tr>
            <td class="pb5">
              <b class=" c7">类型：</b>
              <span>{{myPlace['placeTypeName']}}</span>
            </td>
            <td class="pb5">
              <b class="c7">距离：</b>
              <span>{{initMap(myPlace['lat'], myPlace['lng'])}}KM</span>
            </td>
          </tr>
          <tr>

            <!--<td class="pb5">-->
              <!--<b class="c7 vm">星级：</b>-->
              <!--<i class="redStar"></i>-->
              <!--<i class="redStar"></i>-->
              <!--<i class="redStar"></i>-->
              <!--<i class="redStar"></i>-->
              <!--<i class="grayStar"></i>-->
            <!--</td>-->
            <td class="pb5">
              <b class="c7">难度：</b>
              <i v-for="(i,index) in 5" class="grayStar" :class="{redStar:myPlace['difficulty']>index}"></i>
            </td>
          </tr>
        </table>
      </dd>
      <dd class=" mt10 h60 overflow ">{{limitWord((myPlace.summary===null||myPlace.summary==="")?jsonToHtml(myPlace.jsonDescription):myPlace.summary,150,"...")}}
      </dd>
      <dd class="c60 f12 fm lh28 mt10 clearfix">
        <span class="vm mr30"><em class="mr10">更新  {{myPlace['addTime']}}</em></span>
        <span class="inline-block vm mr30">已来过<i class="c_orgRed_ff481d vm mr5 ml5 ">{{myPlace['userCount']}}</i>人</span>
        <a href="javascript:void (0);" class=" fr bg_grn_119c5b c100 h28 lh28 pl15 pr15 br2 letter1 hoverbg_orgred">查看详情</a>
      </dd>
    </dl>
  </li>
</template>

<script>
  import Utils from '../assets/Util'

  export default {
    name: "placeItem",
    props:{
      place:Object
    },
    data(){
      return {
        myPlace:this.place
      }
    },
    methods:{
      limitWord(words, wordsLength, mark){
        return Utils.limitworld(words, wordsLength, mark);
      },
      // jsonToHtml 兼容富文本
      jsonToHtml: function(json){
        let array = json.split('[{').join('').split('}]').join('').split('},{');
        return this.getText(array);
      },
      getText(argument) {
        let txt = "";
        for (let i = 0; i < argument.length; i++) {
          let Item = argument[i].split(',');
          for (let n = 0; n < Item.length; n++) {
            let ItemArr = Item[n].split(':');
            if (ItemArr[0].split("\"").join("") === "title") {
              txt += ItemArr[1].split("\"").join("")
            }
          }
        }
        return txt.replace(/[\\n]/g, "")
      },
      gotoDetail(id){
        this.$router.push({
          path: '/filedDetail',
          query: {
            id: id
          }
        })
      },
      computeDistance(startCoords, destCoords){
        let startLatRads = this.degreesToRadians(startCoords.latitude);
        let startLoingRads = this.degreesToRadians(startCoords.longitude);
        let destLatRads = this.degreesToRadians(destCoords.latitude);
        let destLongRads = this.degreesToRadians(destCoords.longitude);
        let Radius = 6371;
        return Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + Math.cos(startLatRads) * Math.cos(destLatRads) * Math.cos(startLoingRads - destLongRads)) * Radius;
      },
      degreesToRadians(degrees){
        return (degrees * Math.PI) / 180;
      },
      initMap(lat, lng){
        let startCoords = {
          latitude: localStorage.getItem("lat"),
          longitude:localStorage.getItem("lng")
        };
        let destCoords = {
          latitude: lat,
          longitude:lng
        };
        let km = this.computeDistance(startCoords,destCoords);
        return Math.floor(km);
      }
    }
  }
</script>

<style scoped>

</style>
